<template>
  <div class="create-room-container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h1>创建房间</h1>
    </div>

    <!-- 房间名输入框 -->
    <div class="input-group">
      <input
        id="room-name"
        type="text"
        placeholder="请输入房间名称"
        v-model="roomName"
        maxlength="20"
      />
    </div>

    <!-- 确认按钮 -->
    <button class="submit-btn" @click="handleCreate">
      确认创建
    </button>

    <!-- 返回按钮 -->
    <div class="submit-btn">
      <a @click="$router.go(-1)">返回</a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import config from '@/config';

const router = useRouter();
const roomName = ref('');

// 创建房间逻辑（示例）
const handleCreate = async () => {
  const name = roomName.value.trim();
  if (!name) {
    alert('请输入房间名称');
    return;
  }

  if (name.length < 2 || name.length > 20) {
    alert('房间名称长度需为2-20个字符');
    return;
  }

  let response = await axios.post(config.api + 'data/create-room', { 
    name: name
  }, {
    withCredentials: true
  });
  if (response.data.status == -1) {
    alert(response.data.msg);
  }
  else {
    alert(response.data.msg);
    router.go(-1);
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.create-room-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: url("@/pic/fengmian4.png");
  background-size: cover;
  background-position: center;
  font-family: 'Arial', sans-serif;
  padding: 40px 20px;
}

/* 页面标题 */
.page-title {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.page-title h1 {
  font-size: 24px;
  color: #333;
  font-weight: bold;
}

/* 输入框组 */
.input-group {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 25px;
}

.input-group label {
  font-size: 15px;
  color: #555;
}

.input-group input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #007bff;
}

.input-group input::placeholder {
  color: #ccc;
}

/* 确认按钮 */
.submit-btn {
  margin-top: 10px;
  padding: 14px 24px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 350px;
  transition: background-color 0.3s;
  text-align: center;
}
.submit-btn:hover {
  background-color: #0056b3;
}

.submit-btn a{
    display: block;
}


/* 返回链接 */
.back-link {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}

.back-link a {
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}

.back-link a:hover {
  text-decoration: underline;
}

/* 小屏适配 */
@media (max-width: 480px) {
  .page-title h1 {
    font-size: 22px;
  }

  .input-group,
  .submit-btn {
    max-width: 100%;
  }
}
</style>